<template>
  <div class="perfrct-info">
    <div class="perfrct-info-title">
      完善信息
    </div>
    <div class="info-box">
      <div class="baby-birthday">
        <div class="baby-birthday-text">
          <span class="star">*</span>
          <span> 1.宝宝的生日</span>
        </div>
        <div class="baby-birthday-date">
          <mt-datetime-picker
            type="date"
            ref="picker"
            @confirm = "pickerCallback"
            :startDate = "startDate"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日">
          </mt-datetime-picker>
          <div baby-birthday-date-text @click="openPicker">{{selectDate}}</div>
          <i class="mecell-icon icon-iconfont-platform-entrance"></i>
        </div>
      </div>
      <div class="consumption">
        <div class="consumption-text">2.宝宝月食用奶粉罐数：</div>
        <div class="consumption-select">
          <div class="consumption-select-radio" v-for="(item,index) in consumptionRadio" :key="index" >
            <span class="radio" :class="{select:item.checked}" @click="clickRadio(index,'consumptionRadio')"></span>
            <span class="text">{{item.text}}</span>
          </div>
        </div>
      </div>
      <div class="old-brand">
        <div class="old-brand-text">3.之前喝的品牌:</div>
        <div class="old-brand-content">
          <input type="text" v-model="oldBrandOther" />
        </div>
      </div>
      <div class="reason">
        <div class="reason-text">4.考虑换奶的原因：</div>
        <div class="reason-select">
          <div class="reason-select-radio" v-for="(item,index) in reasonRadio" :key="index" >
            <span class="radio" :class="{select:item.checked}" @click="clickRadio(index,'reasonRadio')"></span>
            <span class="text">{{item.text}}</span>
          </div>
          <div class="reason-other">
            <div class="reason-other-text">其他:</div>
            <div class="reason-other-input">
              <input type="text" v-model="reasonOther" @input="reasonOtherChange" @focus="reasonOtherChange"/>
            </div>
          </div>
        </div>
      </div>
      <div class="channel">
        <div class="channel-text">5.请问是从什么渠道了解到卡洛塔妮:</div>
        <div class="channel-select">
          <div class="channel-select-radio" v-for="(item,index) in channelRadio" :key="index" >
            <span class="radio" :class="{select:item.checked}" @click="clickRadio(index,'channelRadio')"></span>
            <span class="text">{{item.text}}</span>
          </div>
          <div class="channel-other">
            <div class="channel-other-text">其他:</div>
            <div class="channel-other-input">
              <input type="text" v-model="channelOther" @input="channelOtherChange" @focus="channelOtherChange"/>
            </div>
          </div>
        </div>
      </div>
      <div class="receiver-info">
        <div class="receiver-info-text">6.收货人联系方式:</div>
        <div class="address">
          <div class="address-text">收货地址：</div>
          <div class="address-picker">
            <mt-popup v-model="areaVisible" class="address-picker-popup" position="bottom">
              <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
            </mt-popup>
            <div class="address-picker-text" @click="handlerArea">{{areaString}}</div>  
            <i class="mecell-icon icon-iconfont-platform-entrance"></i>
          </div>
        </div>
        <div class="address">
          <div class="address-text">详细地址：</div>
          <div class="address-input">
            <input type="text" v-model="addressInfo">
          </div>
        </div>
        <div class="name">
          <div class="name-text">您的姓名：</div>
          <div class="name-input">
            <input type="text" v-model="name">
          </div>
        </div>
        <div class="phone">
          <div class="phone-text">手机号码：</div>
          <div class="phone-input">
            <input type="text" v-model="phone">
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <button class="submit" @click="submitBtn">提交</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from'vue'
import {Alert, Confirm, Toast} from 'wc-messagebox'
import 'wc-messagebox/style.css'

let options = {
  title: '', // 默认无标题
  btn: {
    text: '',
    style: {
      'backgroun-color': 'red',
      'font-size': '20px',
      'color': 'blue'
    }
  }
}
Vue.use(Alert, options)
Vue.use(Confirm, options)

// 导入数据
import data from '../../assets/data/data.json'
let index = 0
let index2 = 0
let index3 = 0
// 初始化省
let province = data.map(res => {
  return res.name
})
// 初始化市
let city = data[index].childs.map(res => {
  return res.name
})
// 初始化区
let area = data[index].childs[index2].childs.map(res => {
  return res.name
})

export default {
  data(){
    return{
      name: '', //姓名
      phone: '', //电话
      addressInfo: '',//地址详情
      consumptionRadio:[
        {text:"1罐", checked:false},
        {text:"2罐", checked:false},
        {text:"3-4罐", checked:false}
      ],
      oldBrandOther:'',//之前喝过得品牌其他选项
      reasonRadio:[
        {text:"戒奶", checked:false},
        {text:"宝宝喝牛奶过敏", checked:false},
        {text:"宝宝喝牛奶上火 ", checked:false},
        {text:"宝宝消化不好", checked:false},
        {text:"口味", checked:false},
      ],
      reasonOther:'',//考虑换奶的原因其他选项
      channelRadio:[
        {text:"朋友亲戚介绍", checked:false},
        {text:"实体店看过", checked:false},
        {text:"百度搜索 ", checked:false},
        {text:"淘宝上推广图片", checked:false},
      ],
      channelOther:'',//渠道其他选项
      startDate: new Date('1990-05-01'),
      selectDate: "选择时间",
      areaVisible: false,
      areaString: '省,市,区',
      areaStringFlag: false,
      slots: [{
        flex: 1,
        values: province,
        className: 'slot1',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot2',
        textAlign: 'center'
      }, {
        flex: 1,
        values: city,
        className: 'slot3',
        textAlign: 'center'
      }, {
        divider: true,
        content: '-',
        className: 'slot4',
        textAlign: 'center'
      }, {
        flex: 1,
        values: area,
        className: 'slot5',
        textAlign: 'center'
      }]
    }
  },
  mounted(){
  },
  methods:{
    //提交
    submitBtn(){
      var answersList = []
      answersList.push({q_id:2,content:this.oldBrandOther})
      this.consumptionRadio.forEach((item,index) => {
        if(item.checked){
          let obj ={q_id:1,content:item.text}
          answersList.push(obj)
        }
      })
      //处理换奶原因数据
      if(this.reasonOther.length > 0){
        answersList.push({q_id:3,content:this.reasonOther})
      }else{
        this.reasonRadio.forEach((item,index) => {
          if(item.checked){
            let obj ={q_id:3,content:item.text}
            answersList.push(obj)
          }
        })
      }
      //处理渠道数据
      if(this.channelOther.length > 0){
        answersList.push({q_id:4,content:this.channelOther})
      }else{
        this.channelRadio.forEach((item,index) => {
          if(item.checked){
            let obj ={q_id:4,content:item.text}
            answersList.push(obj)
          }
        })
      }
      let params = {
        baby_birthday: this.selectDate == "选择时间"? '': this.selectDate,
        answers: answersList,
        address: this.areaString == "省,市,区"? '': this.areaString,
        address_info: this.addressInfo,
        realname: this.name,
        phone: this.phone,
      }
      axios.post("http://admin.xinyidemy.com/api/user/userSurvey", params).then(res => {
        this.$alert(res.data.message, options)
      })
    },
    reasonOtherChange(){
      this.reasonRadio.forEach((item,num) => {
          item.checked = false;
      });
    },
    channelOtherChange(){
      this.channelRadio.forEach((item,num) => {
        item.checked = false;
      });
    },
    //单选按钮排他
    clickRadio(index, type){
      if(type == "reasonRadio"){
        this.reasonOther = "";
      }
      if(type == "channelRadio"){
        this.channelOther = "";
      }
      this[type].forEach((item,num) => {
        if(num == index){
          item.checked = true;
        }else{
          item.checked =false;
        }
      });
    },
    //选择生日的回调
    pickerCallback(date){
      let selectDate = this.getSelectDate(date);
      this.selectDate = selectDate;
    },
    //打开日期控件
    openPicker() {
      this.$refs.picker.open();
    },
    //过滤时间
    getSelectDate(date){
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      return `${y}-${m}-${d}`
    },
    //地区控件
    handlerArea() {
      this.areaVisible = true
    },
    onValuesChange(picker, values) {
      let one = values[0]
      let two = values[1]
      let three = values[2]
      index = province.indexOf(one)
      if (index >= 0 && province.length > 0) {
        city = data[index].childs.map(res => {
          return res.name
        })
        picker.setSlotValues(1, city)
        two = values[1]
      }
      index2 = city.indexOf(two)
      if (index2 >= 0 && city.length > 0) {
        area = data[index].childs[index2].childs.map(res => {
          return res.name
        })
        picker.setSlotValues(2, area)
        three = values[2]
      }
      //阻止第一次触发
      if(this.areaStringFlag){
        this.areaString = values.join(',')
      }
      this.areaStringFlag = true;
    },
  }
};
</script>

<style scoped>
  .perfrct-info{
    width: 100%;
    height: 100vh;
    font-size: 14px;
    box-sizing: border-box;
  }
  .perfrct-info .perfrct-info-title{
    width: 100%;
    height: .8rem;
    background-color: rgb(165, 15, 15);
    color: #fff;
    line-height: .8rem;
    text-align: center;
    font-weight: bold;
    border-radius: .1rem;
    font-size: 15px;
  }
  .perfrct-info .info-box{
    padding: 0 .3rem
    }  
  /* 生日 */
  .perfrct-info .baby-birthday{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .8rem;
    line-height: .8rem;
  }
  .perfrct-info .baby-birthday .baby-birthday-text .star{
    color: red
  }
  .perfrct-info .baby-birthday .baby-birthday-date{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .perfrct-info .baby-birthday .baby-birthday-date .mecell-icon{
    transform: rotate(-90deg)
  }
  /* 消耗量 */
  .perfrct-info{
    width: 100%;
  }
  .perfrct-info .consumption .consumption-text,
  .perfrct-info .reason .reason-text,
  .perfrct-info .channel .channel-text
  {
    height: .8rem;
    line-height: .8rem;
  }
  .perfrct-info .consumption .consumption-select,
  .perfrct-info .reason .reason-select,
  .perfrct-info .channel .channel-select
  {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .perfrct-info .consumption .consumption-select .consumption-select-radio,
  .perfrct-info .reason .reason-select .reason-select-radio,
  .perfrct-info .channel .channel-select .channel-select-radio
  {
    display: flex;
    align-items: center;
    height: .44rem;
    line-height: .44rem;
    margin-top:.14rem;
    margin-right: .2rem;
  }
  .perfrct-info .consumption .consumption-select .radio,
  .perfrct-info .reason .reason-select .radio,
  .perfrct-info .channel .channel-select .radio
  {
    width: .42rem;
    height: .44rem;
    background-color: #fff;
    border: 1px #ccc solid;
    margin-right: .1rem;
  }
  .perfrct-info .consumption .consumption-select .select,
  .perfrct-info .reason .reason-select .select,
  .perfrct-info .channel .channel-select .select
  {
    background:url(../../assets/img/select.png) center center no-repeat;
  }
  .perfrct-info .reason-other,
  .perfrct-info .channel-other
  {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .14rem;
  }
  .perfrct-info .reason-other .reason-other-text,
  .perfrct-info .channel-other .channel-other-text
  {
    margin-right: .2rem;
  }
  .perfrct-info .reason-other .reason-other-input,
  .perfrct-info .channel-other .channel-other-input
  {
    padding: .05rem;
    padding-left: .1rem;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc
  }
  .perfrct-info .reason-other .reason-other-input input,
  .perfrct-info .channel-other .channel-other-input input
  {
    border: none;
    outline: none;
    background-color: #fff;
  }
  /* 之前喝的品牌 */
  .perfrct-info .old-brand{
    display: flex;
    align-items: center;
    height: .8rem;
    margin-top: .2rem;
  }
  .perfrct-info .old-brand .old-brand-content{
    padding: .05rem;
    padding-left: .1rem;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: .2rem;
  }
  .perfrct-info .old-brand .old-brand-content input{
    height: .4rem;
    outline: none;
    border: none;
  }
  /* 收货人信息 */
  .perfrct-info .receiver-info{
    width: 100%;
    margin-top: .3rem;
  }
  .perfrct-info .receiver-info .address,
  .perfrct-info .receiver-info .name,
  .perfrct-info .receiver-info .phone
  {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: .1rem
  }
  .perfrct-info .receiver-info .address{
    display: flex;
    justify-content: space-between;
  }
  .perfrct-info .receiver-info .address .address-text,
  .perfrct-info .receiver-info .name .name-text,
  .perfrct-info .receiver-info .phone .phone-text
  {
    width: 25%;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
  }
  .perfrct-info .receiver-info .address .address-picker{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .perfrct-info .receiver-info .address .address-picker .address-picker-popup{
    width: 100vw;
  }
  .perfrct-info .receiver-info .address .address-picker .mecell-icon{
    transform: rotate(-90deg)
  }
  .perfrct-info .receiver-info .address .address-input,
  .perfrct-info .receiver-info .name .name-input,
  .perfrct-info .receiver-info .phone .phone-input
  {
    width: 75%;
    padding: .03rem;
    padding-left: .1rem;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .perfrct-info .receiver-info .address .address-input input,
  .perfrct-info .receiver-info .name .name-input input,
  .perfrct-info .receiver-info .phone .phone-input input
  {
    width: 100%;
    height: .4rem;
    outline: none;
    border: none;
  }
  /* 提交按钮 */
  .perfrct-info .btn-box {
    width: 100%;
    margin-top: .4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .perfrct-info .btn-box .submit{
    border: none;
    width: 98%;
    height: .8rem;
    background-color: rgb(165, 15, 15);
    color: #fff;
    text-align: center;
    line-height: .6rem;
    border-radius: .1rem;
  }
  .perfrct-info .btn-box .submit:active{
    background-color: rgb(228, 22, 22);
  }
</style>